<template>
    <ul class="sheet-list">
        <li v-for="item in list" :key="item.id">
            <div class="left-info-sheet">
                <img :src="item.coverImgUrl"  alt="">
                <div class="sheet-info">
                    <div class="sheet-name">{{item.name}}</div>
                    <div class="sheet-num">
                        <span>{{item.trackCount}}首</span> by <span>{{item.creator.nickname}}</span>
                    </div>
                </div>
            </div>
            <div class="right-ellipsis"><i class="iconfont">&#xe602;</i></div>    
        </li>
    </ul>
</template>
<script>
export default {
    name:'sheet-item',
    props:{
        list:{
            type:Array,
            default:[]
        }
    }
}
</script>
<style lang="less" scoped>
    .sheet-list{
        margin: 20px 0px;
        li{
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left-info-sheet{
                flex:1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 100px;
                    height: 100px;
                    border-radius: 10px;
                }
                .sheet-info{
                    margin-left: 20px;
                    flex:1;
                    .sheet-name{
                        font-size: 28px;
                        color: #000;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .sheet-num{
                        margin-top:10px;
                        color: #bdbdbd;
                        span{
                            display: inline-block;
                            margin-right: 10px;
                            
                        }
                    }
                }
            }
            .right-ellipsis{
                width: 50px;
                .iconfont{
                    font-size: 42px;
                    color: #bdbdbd;
                }
            }
        }
    }
</style>